<style>
.content {
    min-height: 850px;
}
</style>
<form method="post" action="/oss/?r=routineCrossServer/doAdd">
    <{include file='../common_params.tpl'}>

    <div class="box box-black">
        <div class="box-body">
            <table class="table table-bordered">
                <colgroup>
                    <col style="width: 20%;"></col>
                    <col style="width: 80%;"></col>
                </colgroup>

                <tr>
                    <th class="th-label">常规跨服名称</th>
                    <td>
                        <input type="text" name="cross_server_name" class="form-control inline" placeholder="" />
                    </td>
                </tr>
                
                <tr>
                    <th class="th-label">跨服结点名</th>
                    <td>
                        <input type="text" name="node_name" class="form-control inline" placeholder="" />
                    </td>
                </tr>
                
                <tr>
                    <th class="th-label">开发ID</th>
                    <td>
                        <input type="text" name="develop_id" class="form-control inline" placeholder="" />
                    </td>
                </tr>
                
                <tr>
                    <th class="th-label">版本号</th>
                    <td>
                        <input type="text" name="version" class="form-control inline" placeholder="" />
                    </td>
                </tr>
                
                <tr>
                    <th class="th-label">服务器IP</th>
                    <td>
                        <input type="text" name="ip" class="form-control inline" placeholder="IP" />
                        <input type="text" name="port" size="8" class="form-control inline" placeholder="端口" />
                    </td>
                </tr>
                
                <tr>
                    <th class="th-label">结束时间</th>
                    <td><input type="text" name="end_time" class="form-control inline time" /> <span style="color: #008855;">可填可不填，不填则以预备周期来计算结束时间</span></td>
                    <input type="hidden" name="cycle" value="<{$crossList.cycle}>" />
                </tr>
                
                
                <tr>
                    <th class="th-label">包含服务器</th>
                    <td>
                      <ul class="nav send-item-list">
                       <li class="fli">
                    	<select name="server_id[]" class="server_id" >
                    		<{html_options options=$serverList selected=$item.value}>
                    	</select>
                    	<div class="box-tools inline">
                            <a href="javascript:;" class="tools-btn tools-btn-add badge bg-green"><i class="fa fa-plus"></i></a>
                            <a href="javascript:;" class="tools-btn btn-del badge bg-red"><i class="fa fa-minus"></i></a>
                        </div>
                       </li>
                      </ul>
                    </td>
                </tr>
                

            </table>
        </div>

        <div class="box-footer">
            <a href="javascript:history.go(-1);" class="btn btn-default">返回</a>
            <button type="submit" name="sub" class="btn btn-default pull-right">保存</button>
        </div>
    </div>
</form>

<script type="text/javascript">
    $(function(){
    	$(".time").datetimepicker({
            format: 'yyyy-mm-dd hh:ii:00',
        });
        
        
        $('select[class="server_id"]').searchableSelect({width: 180,size: 12,height: 20,padding1: 5,padding2: 6,top : 4,right: 7});
        
        var option= '';
    	<{foreach from=$serverList item=item key=key}>
            option += '<option value="<{$key}>"><{$item}></option>';
        <{/foreach}>
        console.log(option);
        var attach_edit_info = '<li class="fli" style="margin-top: 10px;">';
    	attach_edit_info += '<select name="server_id[]" class="server_id">';
    	attach_edit_info += option;
    	attach_edit_info += '</select>';
    	attach_edit_info += '<div class="box-tools inline" style="margin-left: 5px;">';
    	attach_edit_info += '<a href="javascript:;" class="tools-btn tools-btn-add badge bg-green"><i class="fa fa-plus"></i></a>';
    	attach_edit_info += '<a style="margin-left: 5px;" href="javascript:;" class="tools-btn btn-del badge bg-red"><i class="fa fa-minus"></i></a>';
    	attach_edit_info += '</div>';
    	attach_edit_info += '</li>';
        
        var cloneItem = attach_edit_info;
        var routine_num_addone = <{$crossList['routine_num']}>;
        var routine_num = routine_num_addone - 1;
        $(".tools-btn-add").live('click',function(){
        	var length = $(".send-item-list .fli").length;
        	if(length > routine_num){
        		layer.alert('选择的服务器不能大于'+routine_num_addone+'个', {icon: 2, skin: 'layui-layer-molv'});
        		return false;
        	}
            var li = $(this).closest('li');
            var oneClone = $(cloneItem).clone(); //先转jquery对象         
            oneClone.insertAfter(li);
            oneClone.find('.sel-item-list').chosen();
            oneClone.find('select[class="server_id"]').searchableSelect({width: 180,size: 12,height: 20,padding1: 5,padding2: 6,top : 4,right: 7});
        });


        $(".btn-del").live('click',function(){
            if(!window.confirm('是否要删除该条数据?')) return true;
            var li = $(this).closest('li'),
                ul = li.closest('ul');

            if(ul.children('li').length > 1){
                li.remove();
            }else{
                li.find('select, input').val('').change();
            }
        });

        
        
    	$('button[name="sub"]').click(function(){  		           
        	var cross_server_name = $('input[name="cross_server_name"]').val();
        	if(cross_server_name == ''){
        		layer.alert('请填写常规跨服名称', {icon: 2, skin: 'layui-layer-molv'});
            	return false;
        	}
        	
        	var node_name = $('input[name="node_name"]').val();
        	if(node_name == ''){
        		layer.alert('请填写跨服节点名称', {icon: 2, skin: 'layui-layer-molv'});
            	return false;
        	}
        	
        	var develop_id = $('input[name="develop_id"]').val();
        	if(develop_id == ''){
        		layer.alert('请填写开发ID', {icon: 2, skin: 'layui-layer-molv'});
            	return false;
        	}
        	
        	var version = $('input[name="version"]').val();
        	if(version == ''){
        		layer.alert('请填写版本号', {icon: 2, skin: 'layui-layer-molv'});
            	return false;
        	}
        	
        	var ip = $('input[name="ip"]').val();
        	if(ip == ''){
        		layer.alert('请填写IP', {icon: 2, skin: 'layui-layer-molv'});
            	return false;
        	}
        	
        	var port = $('input[name="port"]').val();
        	if(port == ''){
        		layer.alert('请填写端口', {icon: 2, skin: 'layui-layer-molv'});
            	return false;
        	}
        	
        	var arr = new Array();
            $("select[name='server_id[]']").each(function(i){
                if($(this).val() != ''){
            		arr[i] = $(this).val();
            	}  
            });
            var ids = arr.join(",");
            if(isRepeat(arr) == true){
            	layer.alert('服务器的选择不能重复', {icon: 2, skin: 'layui-layer-molv'});
            	return false;
            }

        });
    });
    
    /**
     * 判断数组是否存在重复值
     * @param {Object} arr
     */
    function isRepeat(arr) {
        var hash = {};
        for(var i in arr) {
        	if(hash[arr[i]]) {
                return true;
           }
           hash[arr[i]] = true;
        }
        return false;
    }

    
    
</script>